<template>
  <div class="enterprise">
    <Mapview ref="baseMap" @mapLoad="mapLoad"></Mapview>
    <div class="bg">
      <HeadBox title="非煤矿山"></HeadBox>
      <div class="main">
        <el-col :span="7">
          <div class="contetn-left">
            <ItemWrap :reverse="true" style="height: 34vh" title="企业类别">
              <div style="display: flex; width: 100%">
                <echarts1
                  v-if="dataList1.length > 0"
                  v-for="(item, index) in dataList1"
                  :key="index"
                  :domId="'echarts' + index"
                  :index="index"
                  :companyData="item.value"
                  :totalNums="totalCategoryNums"
                />
              </div>
              <div class="tips">
                <p v-for="(item, index) in dataList1" :key="index">
                  <span class="circle"></span>
                  <span class="tit">{{ item.name }}</span>
                  <span class="num" style="color: #00ffff">{{ item.value }}</span>
                </p>
              </div>
            </ItemWrap>
            <ItemWrap style="height: 48vh; margin-top: 20px" title="行业分类">
              <echarts2 v-if="dataList2.length > 0" :data="dataList2"></echarts2>
            </ItemWrap>
          </div>
        </el-col>
        <el-col :span="7" :offset="10">
          <div class="contetn-right">
            <ItemWrap :reverse="true" style="height: 44vh" title="各街道企业分布">
              <echarts3 v-if="dataList3.length > 0" :data="dataList3"></echarts3>
            </ItemWrap>
            <ItemWrap style="height: 38vh; margin-top: 20px" title="企业成立情况统计">
              <echarts4 v-if="dataList4.length > 0" :data="dataList4"></echarts4>
              <!-- <dv-scroll-board :config="config" ref="table1" style="height: calc(100% - 15px)" /> -->
            </ItemWrap>
          </div>
        </el-col>
      </div>
    </div>
    <div id="maptools">
      <ul class="bar">
        <li @mouseover="handleOver()">
          <i class="icon icon-layer"> </i>
          <div class="menu-drop-wrap" ref="menuDropRef" @mouseout="handleOut()">
            <ul class="menu-list">
              <li v-for="(item, index) in mapDropdownList" :key="index">
                <el-checkbox v-model="item.isCheck" @change="changeCheckBox(item, index)" /><span>{{ item.name }} {{ item.nums }}</span>
              </li>
            </ul>
          </div>
        </li>
        <li><i class="icon icon-point"></i></li>
        <li><i class="icon icon-plug" @click="handlePlug(1)"></i></li>
        <li><i class="icon icon-reduce" @click="handlePlug(2)"></i></li>
      </ul>
    </div>
    <info-window v-if="showDetail" :title="detail.name" @close="showDetail = false">
      <info-window-item label="地址：" :value="detail.address"></info-window-item>
      <info-window-item label="经营范围：" :value="detail.business"></info-window-item>
      <info-window-item label="成立时间：" :value="detail.foundDate"></info-window-item>
      <info-window-item label="统一社会信用代码：" :value="detail.unicode"></info-window-item>
    </info-window>
  </div>
</template>
<script>
import echarts1 from './echarts/echarts1.vue'
import echarts2 from './echarts/echarts2.vue'
import echarts3 from './echarts/echarts3.vue'
import echarts4 from './echarts/echarts4.vue'
import InfoWindow from '@/components/info-window/index.vue'
import InfoWindowItem from '@/components/info-window/item.vue'
import Mapview from '@/components/map-container/index.vue'

export default {
  components: {
    Mapview,
    echarts1,
    echarts2,
    echarts3,
    echarts4,
    InfoWindow,
    InfoWindowItem,
  },
  data() {
    return {
      markerList: [],
      detail: {},
      showDetail: false,
      map: null,
      resAmap: null,
      infoWindow: null,
      mapDropdownList: [], // 地图下拉框数组值
      dataList1: [], // 企业类型占比 第一个
      dataList2: [], // 街道企业登记情况 第二个
      dataList3: [], // 企业成立情况  第三个
      dataList4: [], // 企业经营类别分类 第四个
      // config: {
      //   header: ['日期', '数量'],
      //   data: [['<span style="color:#9fe6b8;"></span>', '']],
      //   headerHeight: 35,
      //   headerBGC: '#0f1325', //表头
      //   oddRowBGC: '#0f1325', //奇数行
      //   evenRowBGC: '#171c33', //偶数行
      //   index: true,
      //   columnWidth: [50, 180], //第一列50 后两列自适应
      //   align: ['center'],
      // },
      totalCategoryNums: 37, // 企业分类总数
    }
  },
  created() {
    this.getEchartsData1()
    this.getEchartsData2()
    this.getEchartsData4()
  },
  mounted() {},
  methods: {
    mapLoad(amap) {
      this.map = amap
      this.getEchartsData3()
    },
    // 监听复选框
    changeCheckBox(item, index) {
      this.$set(this.mapDropdownList, index, item) // 解决checkbox点击无响应问题
      let array1 = [],
        array2 = [],
        array3 = ''
      array1 = this.mapDropdownList.filter((tag) => tag.isCheck)
      array2 = array1.map((v) => {
        return `'${v.name}'`
      })
      array3 = array2.join(',')
      this.getQueryPoint(array3)
    },
    /*
     * 获取所有点位
     */
    getQueryPoint(name) {
      this.$get('/colliery/queryPoint', { street: name }).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        let data = res.data
        let mapMarkerList = []
        this.map.clearMap()
        // 地图点位渲染
        mapMarkerList = data.map((item) => {
          // 将 Icon 实例添加到 marker 上
          let marker = new AMap.Marker({
            position: [item.lng, item.lat],
            size: new AMap.Size(55, 48), // 图标尺寸
            offset: new AMap.Pixel(-10, -10), //点位的偏移量
            icon: 'https://xcdx.nyntcl.com/bs.png', //上面定义的你的图标样式在这儿
            extData: item,
          })
          marker.on('click', this.markerClick)
          return marker
          // 将创建的点标记添加到已有的地图实例：
        })
        this.map.add(mapMarkerList) //调用map的add方法点位列表渲染到地图中
      })
    },
    // 第一个 企业类别
    getEchartsData1() {
      this.$get('/colliery/getCategory').then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataList1 = res.data
        let total = 0
        this.dataList1.map((v) => {
          total += Number(v.value)
        })
        this.totalCategoryNums = total // 总数
      })
    },
    // 第二个 行业分类
    getEchartsData2() {
      this.$get('/colliery/getTrade').then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataList2 = res.data
      })
    },
    // 第三个 街道企业分布情况
    getEchartsData3() {
      this.$get('/colliery/getStreet').then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataList3 = res.data
        // 为点位下拉框赋值
        this.mapDropdownList.length = this.dataList3.length
        this.dataList3.map((item, index) => {
          var obj = {}
          obj.isCheck = true
          obj['name'] = item.name
          obj['nums'] = item.value
          obj['data'] = []
          this.mapDropdownList[index] = obj
        })
        let array2 = [],
          array3 = []
        array2 = this.mapDropdownList.map((v) => {
          return `'${v.name}'`
        })
        array3 = array2.join(',')
        this.getQueryPoint(array3)
      })
    },
    // 第四个  企业成立情况
    getEchartsData4() {
      this.$get('/colliery/getFoundDate').then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataList4 = res.data
      })
    },

    //点位点击事件，展示信息窗体
    markerClick(e) {
      this.detail = e.target._opts.extData
      this.showDetail = true
    },

    // 鼠标移入
    handleOver() {
      this.$refs.menuDropRef.style.display = 'block'
    },
    // 鼠标移出
    handleOut() {
      this.$refs.menuDropRef.style.display = 'none'
    },
    // 鼠标放大缩小
    handlePlug(type) {
      if (type === 1) {
        this.map.zoomIn()
      } else {
        this.map.zoomOut()
      }
    },
  },
}
</script>
<style lang="less" scoped>
#maptools {
  .icon-layer {
    background: url('../../assets/image/icon/icon1.png') top no-repeat;
  }
  .icon-point {
    background: url('../../assets/image/icon/icon2.png') top no-repeat;
  }
  .icon-plug {
    background: url('../../assets/image/icon/icon3.png') top no-repeat;
  }
  .icon-reduce {
    background: url('../../assets/image/icon/icon4.png') top no-repeat;
  }
}
.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 997;
  background: url('../../assets/image/bg.png') top no-repeat;
  background-size: 100% 100%;
}
.main {
  display: flex;
  padding: 90px 50px 0;
  justify-content: space-between;
  height: 80vh;
}
#echarts1,
#echarts2,
#echarts3,
#echarts4 {
  height: 100%;
  pointer-events: all;
}
.tips {
  width: 100%;
  padding-top: 20px;
  p {
    justify-content: space-between;
    width: 100%;
    align-items: center;
    display: flex;
    padding: 3px 0;
    width: 100%;
  }
  p:nth-child(2) {
    .circle {
      background: rgb(98, 0, 208);
    }
  }
  .circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    top: 6px;
    display: inline-block;
    background: rgb(0, 138, 255);
  }

  .tit {
    font-size: 14px;
    padding-left: 15px;
    color: #fff;
  }
  .num {
    font-size: 14px;
    color: #fff;
  }
}
</style>
